<style scoped>
@import "@/assets/print.css";

.formTable {
  display: flex;
  width: 120%;
  margin-top: 10px;
}
</style>
<template>
  <div class="formTable">
    <slot name="index"></slot>
    <div>
      <el-select
          placeholder="商品名称"
          v-model="addGoodAllList[index].id"
          style="width: 160px;"
      >
        <el-option
            v-for="item in props.goodsAllList"
            :label="item.name"
            :value="item.name"
        />
      </el-select>
    </div>

    <div>
      <el-select
          placeholder="单位"
          v-model="addGoodAllList[index].per"
          style="width: 120px;"
      >
        <el-option
            v-for="item in perList"
            :label="item"
            :value="item"
        />
      </el-select>
    </div>

    <div>
      <el-input
          v-model="addGoodAllList[index].number"
          type="number"
      >
        <template #prepend>
          数量
        </template>
      </el-input>
    </div>

    <div>
      <el-input
          v-model="addGoodAllList[index].costPrice"
          type="number"
      >
        <template #prepend>
          单价
        </template>
      </el-input>
    </div>

    <div>
      <el-input
          v-model="addGoodAllList[index].money"
          disabled="disabled"
          type="number"
      >
        <template #prepend>
          金额
        </template>
      </el-input>
    </div>
  </div>

  <div class="formTable">
    <el-form-item label="备注:">
      <el-input
          type="textarea"
          show-word-limit
          maxlength="50"
          v-model="addGoodAllList[index].remark"
      />
    </el-form-item>
    <slot name="button"></slot>
  </div>
</template>
<script setup lang="ts">
import {inject, ref, watch} from "vue";
const addGoodAllList = defineModel('addGoodAllList')
const props = defineProps(['index', 'rid', 'goodsAllList'])
const index = props.index
const perList = ref([])
const perAllList = inject('perAllList')
watch(() => addGoodAllList.value[index].id, () => {
  perList.value = []
  for (let i = 0; i < perAllList.value.length; i++) {
    if (addGoodAllList.value[index].id == perAllList.value[i].goodName) {
      perList.value.push(perAllList.value[i].per)
    }
  }
  addGoodAllList.value[index].per = perList.value[0]
  for (let i = 0; i < props.goodsAllList.length; i++) {
    if (addGoodAllList.value[index].id == props.goodsAllList[i].name){
      addGoodAllList.value[index].c_name=props.goodsAllList[i].categoryName
      break
    }
  }
})
watch([() => addGoodAllList.value[index].id, () => addGoodAllList.value[index].per, () => props.rid], () => {
  if (addGoodAllList.value[index].id
      &&addGoodAllList.value[index].per
      &&props.rid){
    for (let i = 0; i < perAllList.value.length; i++) {
      if (addGoodAllList.value[index].id==perAllList.value[i].goodName
          &&addGoodAllList.value[index].per==perAllList.value[i].per
          &&props.rid==perAllList.value[i].uid){
        addGoodAllList.value[index].costPrice=perAllList.value[i].costPrice
        break
      }else {
        addGoodAllList.value[index].costPrice=""
      }
    }
  }
})
</script>